<template>
  <div class="order">
    <template>
      <el-table :data="orderData" style="width: 100%" border="">
        <el-table-column
          prop="orderDetail"
          label="产品图片"
          width="130"
          align="center"
        >
          <!-- 插槽 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="scope.row.orderDetail[0].imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_id"
          label="订单编号"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderDetail[0].productName"
          label="产品名称"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderDetail[0].quantity"
          label="数量"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="total_fee"
          label="总价格"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="130"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pay_status"
          label="支付状态"
          width="130"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.pay_status === 1 ? "已支付" : "未支付" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="order_status"
          label="订单状态"
          width="130"
          align="center"
        >
          <template v-slot="{ row }">
            <span v-if="row.order_status == 0">未提交</span>
            <span v-else-if="row.order_status == 1">提交成功</span>
            <span v-else-if="row.order_status == 2">已经取消</span>
            <span v-else-if="row.order_status == 3">无效订单</span>
            <span v-else-if="row.order_status == 4">交易关闭</span>
            <span v-else-if="row.order_status == 5">退货</span>
          </template>
        </el-table-column>
        <el-table-column prop="opration" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="iconfont icon-chongzhi"
              v-hasPay="[row.pay_status, row.order_status]"
            >
              去支付
            </el-button>
            <el-button
              type="danger"
              icon=" el-icon-delete"
              @click="del(row.order_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as api from "@/api/transaction";
export default {
  meta: {
    title: "order",
    name: "订单管理",
    icon: "iconfont icon-dd",
  },
  data() {
    return {
      orderData: [],
    };
  },
  created() {
    //获取订单
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      api.getOrder().then((res) => {
        console.log(res.data);
        this.orderData = res.data.data;
      });
    },
    //删除订单
    del(order_id) {
      api.delOrder(order_id).then((res) => {
        console.log(res);
        //重新获取订单 渲染页面
        this.getOrderList();
        //删除成功提示框
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      });
    },
  },
  directives: {
    hasPay: {
      inserted(el, binding) {
        //pay_status: 支付状态 : 0 未支付  1 已支付   显示按钮状态
        //order_status:订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货
        let [pay_status, order_status] = binding.value;
        // console.log(el.className + " " + "is-disabled", 1111);
        if (pay_status !== 0 || order_status !== 1) {
          el.disabled = true; //禁用按钮
          el.className = el.className + " " + "is-disabled";
        }
      },
    },
  },
};
</script>
